<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/css.css"/>
		<link rel="stylesheet" type="text/css" href="css/details&personnal.css"/>
		<link rel="stylesheet" type="text/css" href="css/browse.css"/>
		<link rel="shortcut icon" href="favicon.ico"/>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>
	<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<a class="navbar-brand" href="#"><img src="img/book.png" alt=""></a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
	
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav mr-auto bt">
						
						<li>图书商城管理系统</li>
					</ul>
	
					<ul class="navbar-nav navbar-light">
						<li class="nav-item"><button class="btn btn-info" type="button" style="margin-left: 5px" data-toggle="modal" data-target="#login"><a href="personnal.html">个人中心</a></button>
						</li>
						<li class="nav-item">
							<button class="btn btn-info" type="button" style="margin-left: 5px" data-toggle="modal" data-target="#login">登录</button>
						</li>
	
						<li class="nav-item">
							<button class="btn btn-success" type="button" style="margin-left: 5px" data-toggle="modal" data-target="#register">注册</button>
						</li>
					</ul>
	
				</div>
			</nav>
			
	<header class="userList">
		
	</header>
	
	<nav>
		<div class="innerBox">
			<ul id="nav-ul">
				<li class="active"><a href="index.html">首页</a></li>
				<li><a href="cates.html">名人励志</a></li>
				<li><a href="dianqi.html">经典名著</a></li>
				<li><a href="wenju.html">儿童绘本</a></li>
			
				<li><a href="pulish.html">发布物品</a></li>
				<li><a href="valuation.html">估价咨询</a></li>
				</li>
			</ul>
		</div>
	</nav>
		<div class="container">
			<div class="innerBox">
				<div class="detialHead">
					<p>书籍&nbsp;>&nbsp;</p><p>经典名著&nbsp;>&nbsp;</p><p>童年</p>
				</div>
				<div class="detailBody">
					<div class="detailBodyleft">
						<div class="chanegecolor" name="0"></div>
						<div class="bigPic">
				       		<div class="info">
								<table>
									<tbody>
										<tr>
											<td>
												<div><img src="img/童年.jpg"></div>
											</td>
											<td>
												<div><img src="img/人间值得.jpg"></div>
											</td>
											<td>
												<div><img src="img/人生.jpg"></div>
											</td>
											
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="sPic">
								<a class="btnleft" href="javascript:;"></a>
								<a class="btnright" href="javascript:;"></a>
								<div class="info">
									<table>
										<tbody>
											<tr>
												<td class="current">
													<div>
														<a href="javascript:"><img src="img/童年.jpg"></a>
													</div>
												</td>
												<td>
													<div>
														<a href="javascript:"><img src="img/人间值得.jpg"></a>
													</div>
												</td>
												<td>
													<div>
														<a href="javascript:"><img src="img/人生.jpg"></a>
													</div>
												</td>
												
											</tr>
										</tbody>
									</table>
								</div>
							</div>
					</div>
					<div class="detailBodyright">
						<div class="commodityTitle">童年</div>
						<div class="commodityauthor"><p>作者：严体华&nbsp;严体华</p><p>出版社：清华大学出版社</p><p>出版时间：2014年8月</p></div>
						<div class="commodityprice"><span>￥30</span><p>原价：￥50</p></div>
						<div class="commoditydetails">
							<div class="commoditydetailsBox"><div class="left">物品分类：书籍</div><div class="right"><a href="#"><img src="img/icons/share.png"/>分享</a></div></div>
							<div class="commoditydetailsBox"><div class="left">物品类型：经典名著</div><div class="right"><a href="#"><img src="img/icons/save.png"/>收藏商品</a></div></div>
							<div class="commoditydetailsBox"><div class="left">新旧程度：八成新</div><div class="right"><a href="#"><img src="img/icons/connect.png"/>联系客服</a></div></div>
						</div>
						<div class="buyBtnbox">
							<div class="btn-group choosenumberBtn">
	                            <div class="btn-group">
		                            <button type="button" class="btn btn-danger addbtn"><i class="glyphicon glyphicon-minus"></i></button>
		                            <input type="text" name="" id="numberbox" value="" placeholder="1"/>
		                            <button type="button" class="btn btn-danger lessbtn"><i class="glyphicon glyphicon-plus"></i></i></button>
	                            </div>
							</div>
							<p class="invertory">(剩余库存：2)</p>
							<a href="#" class="buyRightnow btn btn-danger center-block" data-index="2">立即购买</a>
							<a href="#" class="addShop btn btn-danger center-block" data-index="2"><img src="img/icons/shopcar.png"/>加入购物车</a>
						</div>
					</div>
				</div>
				<div class="detialFootter">
					<div class="tabbable tablediv">  
						<ul class="nav nav-tabs tebleul">    
							<li class="active tableli">
								<a href="#introduction" data-toggle="tab">物品描述</a>
							</li>    
							<li class=" tableli">
								<a href="#comment" data-toggle="tab"> 买家评论(6)</a>
							</li>  
						</ul>  
						<div class="tab-content">    
							<div class="tab-pane active" id="introduction">      
								<div class="introductionBoxleft">
									<p>书是正版图书，质量不错，八成新。</p>
									<p>书是正版图书，是小孩的必备书之一！</p>
									<p>希望这本书能帮到你，快来找我下单吧！祝您生活愉快！</p>
								</div>
								<div class="introductionBoxright">
									<img src="img/cartoon.png"/>
								</div>  
							</div>    
							<div class="tab-pane" id="comment">      
								<div class="commentBox">
									<div class="eachComment">
										<div class="commentBoxleft"><img src="img/头像.png"/></div>
										<div class="commentBoxright">
											<div class="commentBoxname"><a href="#">落枫</a></div>
											<div class="commentBoxmain">书很新，对于小孩的我来说帮助很大。店主人也很好有问必答，耐心解答了我所有问题。</div>
										</div>
									</div>
									
									<div class="eachComment">
										<div class="commentBoxleft"><img src="img/头像.png"/></div>
										<div class="commentBoxright">
											<div class="commentBoxname"><a href="#">落枫</a></div>
											<div class="commentBoxmain">书很新，对于小孩的我来说帮助很大。店主人也很好有问必答，耐心解答了我所有问题。</div>
										</div>
									</div>
									
									<div class="eachComment">
										<div class="commentBoxleft"><img src="img/头像.png"/></div>
										<div class="commentBoxright">
											<div class="commentBoxname"><a href="#">落枫</a></div>
											<div class="commentBoxmain">书很新，对于小孩的我来说帮助很大。店主人也很好有问必答，耐心解答了我所有问题。</div>
										</div>
									</div>
								</div>  
							</div>  
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="row div_row_yxy" style="background:#d6d8d9;padding-top: 40px;padding-bottom: 40px;">
				<div class="col-12 text-center">
					<h3 class="display-8" style="color:red">图书商城管理系统</h3>
					<div class="a" style="color: #6c757d;">
					<span>关于我们</span><span class="copyright_split">|</span>
					<span>联系我们</span><span class="copyright_split">|</span>
					<span>联系客服</span><span class="copyright_split">|</span>
					<span>合作招商</span><span class="copyright_split">|</span>
					<span>商家帮助</span><span class="copyright_split">|</span>
					<span>营销中心</span>
					<p class="" style="margin-top: 15px">前置审批备案号: 川教GX-20120046</p>
					<p class="">Copyright © 2022 yxy All rights reserved</p>
					</div>
				</div>
		</div>
	</body><script type=text/javascript>$(document).ready(function() {
	var curid = 0;
	$(".sPic .info td").click(function() {
		var n = $(".chanegecolor").attr('name');
		$(".sPic .info tr").eq(n).find("td").removeClass("current");
		$(this).addClass("current");
		curid = $(this).index();
		$(".bigPic .info").animate({
			"scrollLeft": curid * 226
		})
	})

	$(".bigPic a.btnright").click(function() {
		var n = $(".chanegecolor").attr('name');
		curid++;
		if (curid > $(".sPic .info tr").eq(n).find("td").size() - 1) {
			alert("已经是最后一张了！");
			curid = $(".sPic .info tr").eq(n).find("td").size() - 1;
		} else {
			$(".bigPic .info").animate({
				"scrollLeft": curid * 226
			})
		}
		$(".sPic .info tr").eq(n).find("td").removeClass("current");
		$(".sPic .info tr").eq(n).find("td").eq(curid).addClass("current");
	});

	$(".sPic a.btnleft").click(function() {
		$(".sPic .info").animate({
			"scrollLeft": "-=80"
		})
	});

	$(".sPic a.btnright").click(function() {
		$(".sPic .info").animate({
			"scrollLeft": "+=80"
		})
	});

});</script>
</html>
